import { memo, useMemo } from 'react';

import { Menu, Dropdown, Modal, Avatar } from 'antd';
import { Link, useLocation } from 'react-router-dom';

import FullScreen from '@/components/FullScreen';
import Settings from '@/components/Settings';
import Hamburger from '@/components/Hamburger';
import BreadCrumb from '@/components/BreadCrumbs';
import './index.less';
import IconSvg from '@/components/IconSvg';
import { UserOutlined } from '@ant-design/icons';

import { getBreadcrumbRoutes } from '@/utils/router';
import locales from '@/locales';
import { useI18n } from '@/store/i18n';
import { useRecoilValue } from 'recoil';
import { IRouterPathKeyRouter } from '@/types/router';

export interface NavbarProps {
  routerPathKeyRouter: IRouterPathKeyRouter;
}

const Navbar = memo(({ routerPathKeyRouter }: NavbarProps) => {
  const location = useLocation();
  const t = useRecoilValue(useI18n(locales));
  console.log('navbar');
  // 面包屑导航
  const breadCrumbs = useMemo(
    () =>
      getBreadcrumbRoutes(location.pathname, routerPathKeyRouter.pathKeyRouter).map((item) => ({
        ...item,
        title: t(item.title),
      })),
    [location, routerPathKeyRouter, t],
  );

  // 注销
  const handleLogout = () => {
    Modal.confirm({
      title: '注销',
      content: '确定要退出系统吗?',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {},
    });
  };

  const menu = () => {
    const items = [
      {
        key: 'home',
        label: <Link to='/home/workplace'>首页</Link>,
      },
      {
        key: 'project',
        label: (
          <a target='_blank' href='https://github.com/NLRX-WJC/react-antd-admin-template' rel='noopener noreferrer'>
            项目地址
          </a>
        ),
      },
      {
        key: 'logout',
        label: <div onClick={handleLogout}>注销</div>,
      },
    ];
    return <Menu items={items} />;
  };

  return (
    <>
      {/* 这里是仿照antd pro的做法,如果固定header，
      则header的定位变为fixed，此时需要一个定位为relative的header把原来的header位置撑起来 */}
      <div className='navbar'>
        <div className='left-nav'>
          <Hamburger />
          <div className='breadCrumb' style={{ marginLeft: '20px' }}>
            <BreadCrumb list={breadCrumbs} />
          </div>
        </div>
        <div className='right-menu'>
          <FullScreen />
          <Settings />
          <div className='dropdown-wrap'>
            <Dropdown dropdownRender={menu}>
              <div>
                <Avatar shape='square' icon={<UserOutlined />} />
                <IconSvg name='arrow-down' />
              </div>
            </Dropdown>
          </div>
        </div>
      </div>
    </>
  );
});

export default Navbar;
